import React,  { Suspense }  from "react";
import { HashRouter, Route, Redirect } from "react-router-dom";
import './App.scss'
// import { renderRoutes } from "react-router-config";
import {router} from './router'
import { connect } from 'react-redux'
// import { KeepAlive} from 'react-keep-alive';
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件
import * as actions from "@/store/actions";
import { ActivityIndicator } from 'antd-mobile'
import ErrorBoundary from './components/myErrorBoundary'


class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            hasCheckLogin: false,
        }
    }

    componentDidMount () {
        this.getUserInfo()
        this.getDefaultTheme()
    }

    getUserInfo = async () => {
        let userInfo = await window.localforage.getItem('userInfo')

        userInfo && this.props.dispatch(actions.updateAppSetting({
            user: userInfo,
            isLogin: true
        }));

        this.setState({
            hasCheckLogin: true
        })

    }

    getDefaultTheme = () => {
        window.localforage.getItem('nightTheme').then(data => {
            if (data != null) {
                this.props.dispatch(actions.changeTheme(data))
            }
        }, err => {})
    }

    loadPageError = (error) => {
        //  todo 重新加载页面js 然后通知组件显示页面
    }

    render () {
        if (!this.state.hasCheckLogin) {
            return (<div></div>)
        }


        let isLogin = this.props.isLogin

        return (
            <div id="app">
                <div className="app-inner">
                    <HashRouter>
                        <ErrorBoundary loadPageError={this.loadPageError}>
                            <Suspense fallback={<ActivityIndicator toast animating/>}>
                                <AnimatedRouter timeout={300}>
                                    {router.map((item, index) => {
                                        return <Route key={index} path={item.path} exact render={props => {
                                            if (item.auth === false || isLogin) {       //  需要校验登录 并且没有登录的话，跳转登陆页面
                                                //  格式化search参数
                                                if (props.location) {
                                                    props.location.searchObj = React.$utils.parseURL('http://a.com' + props.location.search).params || {}
                                                }

                                                return (
                                                    /*<KeepAlive name={item.name}>*/
                                                    <item.component {...props} />
                                                    /*</KeepAlive>*/
                                                )
                                            }

                                            return (<Redirect to={{
                                                pathname: '/login',
                                                state: {from: props.location}
                                            }}/>)
                                        }}/>
                                    })}

                                    {/* todo    没有匹配的路由跳转404页面<Route component={NotFound} />*/}
                                </AnimatedRouter>
                            </Suspense>
                        </ErrorBoundary>
                    </HashRouter>
                </div>
                {/*<div className="tabbar">aaa</div>*/}
                <ActivityIndicator toast animating={this.props.appLoading}/>
            </div>
        );

    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        isLogin: state.app.isLogin,
        appLoading: state.app.appLoading
    }
}

export default connect(mapStateToProps)(App)
